import { createElement, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import "./css/message.css";
import TextInput from 'rax-textinput';
import { mgop } from '@aligov/jssdk-mgop';

function Message() {

    const [type,setType] = useState('');
    const [template,setTemplate] = useState('');
    const [appId,setAppId] = useState('');
    const [smsArg,setSmsArg] = useState('');
    const [result,setResult] = useState('');


    const sendMsg = () => {

        var msgData;
        if (null !== smsArg && "" !== smsArg && undefined !== smsArg) {
            msgData = JSON.parse(smsArg);
        } else {
            msgData = {};
        }

        console.log("消息类型:" + type);
        console.log("消息模版编码:" + template);
        console.log("appId为： " + appId);
        console.log("消息模版参数为:" + smsArg);
        
        mgop({ 
                api: 'mgop.alibaba.tools.sendMessage', // 必须  
                host: 'https://mapi-jcss.hzpolice.gov.cn',  
                dataType: 'JSON',  
                type: 'POST', 
                data: {
                    "type": type,
                    "serviceCode": template,
                    "appId": appId,
                    "templateArgs": msgData
                },
                appKey: '', // 必须  
        onSuccess: data => {
            setResult(JSON.stringify(data));   
            console.log("mgop run success. data :  " + JSON.stringify(data)); 
        },  
        onFail: err => {     
            setResult(JSON.stringify(err));  
            console.log("mgop run error. error :  " + JSON.stringify(err)); 
            }})
    }

   

  return (
    <View>
       <div>
           <h1 style={{textAlign:'center',color:'white'}}>通知中心消息发送Demo</h1>
           
           <div>
                <h5 style={{textAlign:'justify',color:'blue'}}>请选择消息类型:</h5>
                <span>
                        <button 
                            onClick={() => setType('messageBox')}
                        >消息盒子</button>

                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>

                        <button onClick={() => setType('sms')}> 短  信 </button>

                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>

                        <button onClick={() => setType('sysMessage')}>系统消息</button>

                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
           </div>

           <div>
            <h5 style={{textAlign:'justify',color:'blue'}}>请输入消息模版编码:</h5>
                    <TextInput value={template}
                                onChangeText={text => setTemplate(text)}
                                style={{
                                    width: 600,
                                    height: 200,
                                    borderWidth: 1,
                                    borderColor: '#dddddd',
                                    borderStyle: 'solid'
                                }}
                    ></TextInput>
           </div>

           <div>
            <h5 style={{textAlign:'justify',color:'blue'}}>请输入系统appId:</h5>
                    <TextInput value={appId}
                                onChangeText={text => setAppId(text)}
                                style={{
                                    width: 600,
                                    height: 200,
                                    borderWidth: 1,
                                    borderColor: '#dddddd',
                                    borderStyle: 'solid'
                                }}
                    ></TextInput>
           </div>

           <div>
            <h5 style={{textAlign:'justify',color:'blue'}}>请输入消息模版参数(JSON):</h5>
                    <TextInput value={smsArg}
                                onChangeText={text => setSmsArg(text)}
                                style={{
                                    width: 600,
                                    height: 200,
                                    borderWidth: 1,
                                    borderColor: '#dddddd',
                                    borderStyle: 'solid'
                                }}
                    ></TextInput>
           </div>

           <div>
                <h5 style={{textAlign:'justify',color:'blue'}}>发送结果:</h5>
                        <Text>{result}</Text>
           </div>
        
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>

           <div>
           <button onClick={() => sendMsg()}
                            style={{
                                width: 160,
                                height: 40,
                                backgroundColor: 'grey',
                                color: 'white',
                                fontSize: 8
                            }}  
                  >发送消息</button>
           </div>

       </div>
    </View>
  );
}

export default Message;
